<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8_path_curve</title>
</head>
<body>
<h1>贝塞尔曲线</h1>
<h2>三次贝塞尔曲线C命令</h2>
<svg viewBox="0 0 190 80" xmlns="http://www.w3.org/2000/svg">
    <path d="M10  10 C 20  20, 40  20, 50  10" stroke="#C7000B" fill="transparent"/>
    <path d="M70  10 C 70  20, 120 20, 120 10" stroke="#C7000B" fill="transparent"/>
    <path d="M130 10 C 120 20, 180 20, 170 10" stroke="#C7000B" fill="transparent"/>
    <path d="M10  30 C 20  50, 40  50, 50  30" stroke="#C7000B" fill="transparent"/>
    <path d="M70  30 C 70  50, 110 50, 110 30" stroke="#C7000B" fill="transparent"/>
    <path d="M130 30 C 120 50, 180 50, 170 30" stroke="#C7000B" fill="transparent"/>
    <path d="M10  50 C 20  80, 40  80, 50  50" stroke="#C7000B" fill="transparent"/>
    <path d="M70  50 C 70  80, 110 80, 110 50" stroke="#C7000B" fill="transparent"/>
    <path d="M130 50 C 120 80, 180 80, 170 50" stroke="#C7000B" fill="transparent"/>
</svg>
<h2>S命令</h2>
<svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="#C7000B" fill="transparent"/>
</svg>
<h2>Q命令</h2>
<svg viewBox="0 0 190 80" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 40 Q 95 10 180 40" stroke="#C7000B" fill="transparent"/>
</svg>
<h2>T命令</h2>
<svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="#C7000B" fill="transparent"/>
</svg>
<h1>弧形</h1>
<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 315
             L 110 215
             A 30 50 0 0 1 162.55 162.45
             L 172.55 152.45
             A 30 50 -45 0 1 215.1 109.9
             L 315 10"
          stroke="#C7000B" fill="green" />
</svg>
</body>
</html>
